<template>
  <view class="container">
    <!-- 无作品时的空状态 -->
    <view v-if="works.length == 0" class="empty-state">
      <image class="empty-icon" src="/static/video/no.png"></image>
      <text class="empty-text">暂无生成记录</text>
      <button class="generate-btn" @click="goToVideo">去生成</button>
    </view>

    <!-- 有作品时的作品列表 -->
    <view  class="works-container" v-else>
      <view class="works-list">
        <view v-for="(work, index) in works" :key="index" class="work-item">
          <!-- 作品卡片 -->
          <view class="work-card" @click="showVideoPlayer(index)">
            <image class="work-image" :src="work.image" mode="aspectFill"></image>
            <!-- 播放按钮 -->
            <view class="play-button">
              <image class="play-icon" src="/static/Ai/start.png" mode="aspectFill"></image>
            </view>
          </view>
          <!-- 作品信息 -->
          <view class="work-info">
            <view class="work-name-container">
              <text class="work-name">{{ work.type}}</text>
            </view>
            <view class="work-meta">
              <text class="work-time">{{ work.createTime}}</text>
              <view class="delete-icon" @click.stop="showDeleteConfirm(index,work.id)">
                <uni-icons type="trash" size="16" color="#999"></uni-icons>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 删除确认弹窗 -->
    <uni-popup ref="popup" type="dialog">
      <view class="custom-popup">
        <view class="popup-title">删除确认</view>
        <view class="popup-content">确定要删除此作品吗？</view>
        <view class="popup-buttons">
          <button class="popup-cancel" @click="cancelDelete">取消</button>
          <button class="popup-confirm" @click="confirmDelete">确定</button>
        </view>
      </view>
    </uni-popup>

    <!-- 视频播放界面 -->
    <view v-if="isVideoPlaying" class="video-player">
      <video :src="currentVideoUrl" controls></video>
      <view class="video-actions">
        <view class="download-button" @click="downloadVideo">
          <uni-icons type="download" size="30" color="#fff"></uni-icons>
        </view>
      </view>
      <view class="close-video" @click="closeVideo">关闭</view>
    </view>
  </view>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import { ApigetAllVideos,ApideleteVideoByid } from '/pages/api/video.js';



// 当前要删除的作品索引
const currentDeleteIndex = ref(-1);

// 是否正在播放视频
const isVideoPlaying = ref(false);

// 当前播放的视频地址
const currentVideoUrl = ref('');

// 模拟作品数据
const works = ref([]);
//获取所有的生成的视频
const getAllVideo = async()=>{
	let res = await ApigetAllVideos();
	 if(res != null)
	 {
		 works.value = res
	 }
}
onMounted(()=>{
	getAllVideo()
})

// 跳转到视频界面
const goToVideo = () => {
  uni.navigateTo({
	  url:"/pages/tool/video/generation"
  });
};

// 显示视频播放界面
const showVideoPlayer = (index) => {
  isVideoPlaying.value = true;
  currentVideoUrl.value = works.value[index].videoSrc;
};

// 关闭视频播放界面
const closeVideo = () => {
  isVideoPlaying.value = false;
};

// 下载视频
const downloadVideo = () => {
  if (!currentVideoUrl.value) {
    uni.showToast({
      title: '视频地址不存在',
      icon: 'none'
    });
    return;
  }
  
  uni.downloadFile({
    url: currentVideoUrl.value,
    success: (res) => {
      if (res.statusCode === 200) {
        console.log('下载成功', res.tempFilePath);
        uni.showToast({
          title: '视频下载成功',
          icon: 'none'
        });
        // 如果需要保存到相册，可以调用以下 API
        uni.saveVideoToPhotosAlbum({
          filePath: res.tempFilePath,
          success: () => {
            console.log('保存到相册成功');
          },
          fail: (err) => {
            console.error('保存到相册失败', err);
            uni.showToast({
              title: '保存到相册失败',
              icon: 'none'
            });
          }
        });
      } else {
        console.error('下载失败', res);
        uni.showToast({
          title: '视频下载失败',
          icon: 'none'
        });
      }
    },
    fail: (err) => {
      console.error('下载失败', err);
      uni.showToast({
        title: '视频下载失败',
        icon: 'none'
      });
    }
  });
};

const ids = ref(0)
// 显示删除确认弹窗
const popup = ref(null);
const showDeleteConfirm = (index,id) => {
  currentDeleteIndex.value = index;
  ids.value = id
  popup.value.open();
};

// 确认删除
const confirmDelete = async () => {
  works.value.splice(currentDeleteIndex.value, 1);
  if (works.value.length === 0) {
    hasWorks.value = false;
  }
  popup.value.close();
  await ApideleteVideoByid(ids.value)
};

// 取消删除
const cancelDelete = () => {
  popup.value.close();
};
</script>

<style scoped lang="scss">
/* 空状态样式 */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background-color: #f7f7f7;
}

.empty-icon {
  width: 120px;
  height: 120px;
  margin-bottom: 20px;
}

.empty-text {
  font-size: 16px;
  color: #666;
  margin-bottom: 30px;
}

.generate-btn {
  background-color: #7e57c2;
  width: 200px;
  color: white;
  border: none;
  border-radius: 50px;
  padding: 12px 30px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.generate-btn:hover {
  background-color: #673ab7;
}

/* 作品列表样式 */
.works-container {
  background-color: #f7f7f7;
  height: 100vh;
  padding: 20px;
  box-sizing: border-box;
}

.works-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.work-item {
  width: calc(50% - 10px);
  margin-bottom: 20px;
}

.work-card {
  position: relative;
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 10px;
  background-color: white;
}

.work-image {
  width: 100%;
  height: 180px;
  object-fit: cover;
}

/* 播放按钮样式 */
.play-button {
  position: absolute;
  top: 10px;
  right: 10px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
}

.play-icon {
  width: 30px;
  height: 30px;
}

/* 作品信息样式 */
.work-info {
  display: flex;
  flex-direction: column;
  padding: 10px 0;
}

.work-name-container {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.work-name {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  background-color: #3a75f7;
  color: white;
  padding: 3px 6px;
  border-radius: 4px;
}

.work-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.work-time {
  font-size: 14px;
  color: #999;
}

.delete-icon {
  display: flex;
  align-items: center;
}

/* 自定义弹窗样式 */
.custom-popup {
  background-color: white;
  border-radius: 12px;
  padding: 20px;
  width: 300px;
  text-align: center;
}

.popup-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}

.popup-content {
  font-size: 16px;
  color: #666;
  margin-bottom: 20px;
}

.popup-buttons {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.popup-cancel {
  background-color: #f0f0f0;
  border: none;
  border-radius: 50px;
  padding: 8px 20px;
  font-size: 14px;
  cursor: pointer;
}

.popup-confirm {
  background-color: #7e57c2;
  color: white;
  border: none;
  border-radius: 50px;
  padding: 8px 20px;
  font-size: 14px;
  cursor: pointer;
}

/* 视频播放样式 */
.video-player {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: black;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.video-player video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.video-actions {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 20px;
  z-index: 1001;
}

.download-button {
  background: none;
  border: none;
  color: white;
  cursor: pointer;
  font-size: 24px;
}

.close-video {
  position: absolute;
  top: 20px;
  right: 20px;
  color: white;
  font-size: 18px;
  cursor: pointer;
  z-index: 1001;
}
</style>